export default {
    data() {
      return {
        // 菜谱详情

        //1.菜谱板块
        menuRow: {}, // 主体菜谱
        msList: [], // 菜谱材料
        stepList: [], // 菜谱步骤
        options: [], //菜谱类型
        editDialogVisible: false, //是否打开编辑窗口
        menuform: { //修改的菜谱对象
          menuid: '',
          mtitle: '',
          mimg: '',
          mtypeid: ''
        },
        src: '',
        // 修改表单的验证规则对象
        editFormRules: {
          mtitle: {
            required: true,
            message: '请输入菜谱标题',
            trigger: 'blur'
          }
        },
        menuFile: '', // 菜谱上传图片信息
        fileLength: 0,

        //2.材料修改板块
        mss: [{
          mstitle: '', // 材料标题
          msnumber: '', // 材料单位
          msid: '' //材料id
        }],
        editDialogVisible2: false, //是否打开编辑窗口


        //3.步骤修改板块
        steps: [{
          stitle: '', // 步骤标题
          sdesc: '', // 步骤描述
          simg: '', //步骤图片
          sfile: '',
          sfiles: '',
          stepid: null
        }],
        //srcs:[''], //预览图
        editDialogVisible3: false, //是否打开编辑窗口
        indexs: 0, // 图片数组的下标

        // 左侧菜单数据
        menulist: [],
        iconsObj: {
          1: 'el-icon-reading',
          2: 'el-icon-document',
          3: 'el-icon-user-solid',
          5: 'el-icon-setting'
        },
        // 是否折叠
        isCollapse: false,
        // 被激活的链接地址
        activePath: ''
      }
    },
    // computed: {
    //     // 计算属性的 getter
    //     num: function () {
    //       // `this` 指向 vm 实例
    //       return this.count++;
    //     }
    //},
    created() {
      this.getMenuList() // 查询导航菜单
      this.activePath = window.sessionStorage.getItem('activePath')
      // 获取菜谱详情页信息
      this.getMenuInfo();
      this.getTypes(); //获取所有菜谱类型
    },
    methods: {
      // 菜谱详情页
      //3.步骤板块
      //展示编辑步骤的对话框
      async showStepDialog() {
        this.steps = this.stepList;
        console.log(this.steps.sfile + 'asd' + this.steps.sfiles);
        this.editDialogVisible3 = true
      },
      // 监听修改步骤对话框的关闭事件
      editDialogClosed3() {
        this.$refs.editFormRef3.resetFields() // 重置表单
      },
      // 修改步骤信息并提交
      async editStepInfo() {
        // 表单预校验
        // this.$refs.editFormRef.validate(async valid => {
        //   if (!valid) return
        // 发起修改步骤信息的数据请求
        // 配置上传图片的头信息

        // 封装步骤信息
        var param = new FormData();
        // 步骤数据
        for (var i = 0; i < this.steps.length; i++) {
          param.append('stepList[' + i + '].stitle', this.steps[i].stitle)
          param.append('stepList[' + i + '].sdesc', this.steps[i].sdesc)
          param.append('stepList[' + i + '].stepid', this.steps[i].stepid)
          param.append('stepList[' + i + '].smenuid', this.menuRow.menuid)
          param.append('stepList[' + i + '].simg', this.steps[i].simg)
        }
        // 步骤图片
        // for (var i = 0; i < this.steps.length; i++) {
        //   param.append('stepFile', this.steps[i].simg)
        // }
        const {
          data: res
        } = await this.$axios.post(
          'MenuController/updateStep.action', param
        )
        if (res < 1) {
          return this.$message.error('更新步骤信息失败！')
        }
        // 关闭对话框
        this.editDialogVisible3 = false
        // 刷新数据列表
        this.getMenuInfo();
        // 提示修改成功
        this.$message.success('更新步骤信息成功！')
        // })
      },
      getIndex(i) { // 获取点击图片的下标
        this.indexs = i
        // console.log(i);
      },
      // 上传图片的选择和删除及存储file
      // 阻止upload的自己上传，进行再操作
      async onchange2(file, filesList) {
        // 试一下$event
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        var windowURL = window.URL || window.webkitURL
        this.steps[this.indexs].sfile = windowURL.createObjectURL(file.raw)
        let formdata = new FormData();
        formdata.append("file", file.raw);
        const {
          data: res
        } = await this.$axios.post(
          'UserController/uploadOne.action', formdata, config
        )
        console.log(res);
        this.steps[this.indexs].simg = res;
        console.log(this.steps[this.indexs].simg);
      }, // 删除图片
      handleRemove2(file, filesList) {
        this.steps[this.indexs].sfile = '';
        this.steps[this.indexs].simg = '';
      },
      // 添加一组步骤
      addstep(index, type) {
        if (this.steps[this.steps.length - 1].stitle.trim() === '' || this.steps[this.steps.length - 1].sdesc.trim() ===
          '' || this.steps[this.steps.length - 1].simg == '') {
          this.$message.error('请您填写完一项后继续追加')
        } else {
          this.steps.push({
            stitle: '',
            sdesc: '',
            simg: '',
            sfile: '',
            sfiles: ''
          });
        }
      },
      // 删除一组步骤
      removems(index, type) {
        this.steps.splice(index, 1)
        this.$message.success('移除成功')
      },


      //2.材料板块
      //展示编辑材料的对话框
      async showMsDialog() {
        this.mss = this.msList;
        this.editDialogVisible2 = true
      },
      // 监听修改材料对话框的关闭事件
      editDialogClosed2() {
        this.$refs.editFormRef2.resetFields() // 重置表单
      },
      // 修改材料信息并提交
      async editMsInfo() {
        // 表单预校验
        // this.$refs.editFormRef.validate(async valid => {
        //   if (!valid) return
        // 发起修改材料信息的数据请求
        // 封装材料信息
        var param = new FormData();
        // 材料数据
        for (var i = 0; i < this.mss.length; i++) {
          param.append('msList[' + i + '].mstitle', this.mss[i].mstitle)
          param.append('msList[' + i + '].msnumber', this.mss[i].msnumber)
          param.append('msList[' + i + '].msid', this.mss[i].msid)
          param.append('msList[' + i + '].msmenuid', this.menuRow.menuid)
        }
        const {
          data: res
        } = await this.$axios.post(
          'MenuController/updateMs.action', param
        )
        if (res < 1) {
          return this.$message.error('更新材料信息失败！')
        }
        // 关闭对话框
        this.editDialogVisible2 = false
        // 刷新数据列表
        this.getMenuInfo();
        // 提示修改成功
        this.$message.success('更新材料信息成功！')
        // })
      },
      // 添加一组材料及为空判断
      addms(index, type) {
        if (this.mss[this.mss.length - 1].mstitle.trim() === '' || this.mss[this.mss.length - 1].msnumber.trim() === '') {
          this.$message.error('请您填写完一项后继续追加')
        } else {
          this.mss.push({
            mstitle: '',
            msnumber: '',
            msid: ''
          });
        }
      },
      // 删除一组材料
      removems(index, type) {
        this.mss.splice(index, 1)
        this.$message.success('移除成功')
      },


      //1.菜谱板块
      // 上传图片的选择和删除及存储file
      // 阻止upload的自己上传，进行再操作
      onchange(file, filesList, event) {
        this.fileLength += 1 // 表示有一张图片
        // 创建临时的路径来展示图片
        var windowURL = window.URL || window.webkitURL
        this.src = windowURL.createObjectURL(file.raw)
        this.menuFile = file.raw
      }, // 删除图片
      handleRemove(file, filesList) {
        this.fileLength -= 1 // 表示删了一张图片
        this.fileLength = filesList.length
        this.menuFile = ''
      },
      //获取所有菜谱类型
      async getTypes() {
        const {
          data: res
        } = await this.$axios.get('MenuController/findType.action');
        this.options = res;
      },

      //展示编辑菜谱的对话框
      async showMenuDialog() {
        this.menuform = this.menuRow;
        this.editDialogVisible = true
      },
      // 监听修改菜谱对话框的关闭事件
      editDialogClosed() {
        this.$refs.editFormRef.resetFields() // 重置表单
      },
      // 修改菜谱信息并提交
      editMenuInfo() {
        // 判断是否选择了图片(还有为空判断)
        // this.fileLength=0说明没有选择图片
        // if (this.fileLength == 0) {
        //   this.$message('请选择一张图片上传')
        //   return;
        // }

        // 表单预校验
        this.$refs.editFormRef.validate(async valid => {
          if (!valid) return
          // 发起修改菜谱信息的数据请求

          // 配置上传图片的头信息
          const config = {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
          // 封装菜谱信息
          var formdata = new FormData();
          formdata.append("menuid", this.menuform.menuid);
          formdata.append("mtitle", this.menuform.mtitle);
          formdata.append("mimg", this.menuform.mimg);
          formdata.append("mtypeid", this.menuform.mtypeid);
          formdata.append("menuFile", this.menuFile);
          console.log(this.menuform.menuid + this.menuform.mtitle + this.menuFile);
          const {
            data: res
          } = await this.$axios.post(
            'MenuController/updateMenu.action', formdata, config
          )
          if (res < 1) {
            return this.$message.error('更新菜谱信息失败！')
          }
          // 关闭对话框
          this.editDialogVisible = false
          // 刷新数据列表
          this.getMenuInfo();
          // 提示修改成功
          this.$message.success('更新菜谱信息成功！')
        })
      },
      //获取详情页信息
      async getMenuInfo() {
        // 接收menulist.vue页面传来的参数 单个menu对象
        var menuRow = this.$route.query.menuRow // 隐藏的方式

        // 根据menuid查询对应的材料和步骤信息(两个集合)
        const {
          data: res
        } = await this.$axios.get('MenuController/findMenuAll.action', {
          params: { // 参数
            menuid: menuRow.menuid
          }
        })
        this.menuRow = res.menus // 菜谱主体
        this.msList = res.msList // 菜谱材料
        this.stepList = res.stepList // 菜谱步骤
        // console.log(res);
      },


      // 退出登陆按钮
      loginOut() {
        window.sessionStorage.clear()
        this.$router.push('/login') // 重定向到登陆页
      },
      // 获取所有的菜单导航
      async getMenuList() {
        const user = JSON.parse(sessionStorage.getItem('user'))
        const {
          data: res
        } = await this.$axios.get('OtherController/menuNav.action', {
          params: { // 参数 角色id
            uroleid: user.uroleid
          }
        })
        this.menulist = res
        console.log(res)
      },
      // 点击按钮，切换菜单的折叠与展开
      toggleCollapse() {
        this.isCollapse = !this.isCollapse
      },
      // 保存链接的激活状态
      saveNavState(activePath) {
        window.sessionStorage.setItem('activePath', activePath)
        this.activePath = activePath
      }

    }
  }
